<template>
  <div>
    <div class="case-toolbar">
      <el-button type="primary" @click="openAdd">新增病例</el-button>
    </div>
    <el-table :data="cases" style="margin-top:8px">
      <el-table-column prop="date" label="就诊日期" width="120" />
      <el-table-column prop="diagnosis" label="诊断" width="180" />
      <el-table-column prop="doctor" label="医生" width="120" />
      <el-table-column prop="desc" label="主诉/描述" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-space>
            <el-button size="small" @click="openEdit(row)">编辑</el-button>
            <el-button size="small" @click="viewDetail(row)">详情</el-button>
            <el-button size="small" type="danger" @click="del(row)">删除</el-button>
          </el-space>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="modalVisible" :title="modalTitle" width="500px">
      <el-form :model="modalForm" label-width="80px">
        <el-form-item label="就诊日期">
          <el-date-picker v-model="modalForm.date" type="date" />
        </el-form-item>
        <el-form-item label="诊断">
          <el-input v-model="modalForm.diagnosis" />
        </el-form-item>
        <el-form-item label="医生">
          <el-input v-model="modalForm.doctor" />
        </el-form-item>
        <el-form-item label="主诉/描述">
          <el-input v-model="modalForm.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="modalVisible=false">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="detailVisible" title="病例详情" width="500px">
      <div v-if="detailCase">
        <div><b>就诊日期：</b>{{ detailCase.date }}</div>
        <div><b>诊断：</b>{{ detailCase.diagnosis }}</div>
        <div><b>医生：</b>{{ detailCase.doctor }}</div>
        <div><b>主诉/描述：</b>{{ detailCase.desc }}</div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const cases = ref([
  { id: 1, date: '2024-05-01', diagnosis: '感冒', doctor: '李医生', desc: '发热咳嗽' },
  { id: 2, date: '2024-05-10', diagnosis: '高血压', doctor: '王医生', desc: '头晕乏力' }
])
const modalVisible = ref(false)
const detailVisible = ref(false)
const modalForm = ref<any>({})
const editingId = ref<number|null>(null)
const detailCase = ref<any>(null)
const modalTitle = computed(() => editingId.value ? '编辑病例' : '新增病例')
function openAdd() {
  editingId.value = null
  modalForm.value = { date: '', diagnosis: '', doctor: '', desc: '' }
  modalVisible.value = true
}
function openEdit(row:any) {
  editingId.value = row.id
  modalForm.value = { ...row }
  modalVisible.value = true
}
function handleOk() {
  if (!modalForm.value.date || !modalForm.value.diagnosis) return
  if (editingId.value) {
    const idx = cases.value.findIndex(c => c.id === editingId.value)
    if (idx !== -1) cases.value[idx] = { ...modalForm.value, id: editingId.value }
  } else {
    const newId = Math.max(...cases.value.map(c => c.id), 0) + 1
    cases.value.push({ ...modalForm.value, id: newId })
  }
  modalVisible.value = false
}
function viewDetail(row:any) {
  detailCase.value = row
  detailVisible.value = true
}
function del(row:any) {
  cases.value = cases.value.filter(c => c.id !== row.id)
}
</script>
<style scoped>
.case-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}
</style> 